<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据录入</title>
</head>
<body>
<div class="top">
    <div style="display: flex;align-items: center;">
        <span class="fontSize-20">选择生产线：</span>
        <select onchange="select()" id="lineCode">
            <option th:each="dict : ${counterList}" th:text="${dict.lineName}" th:value="${dict.lineCode}"></option>
        </select>
    </div>
    <div class="fontSize-20">
        <span>当前计数：</span>
        <span id="count" style="font-weight: bolder;">0</span>
    </div>
    <div class="fontSize-20">
        <span>更新于：</span>
        <span id="date" style="font-weight: bolder;">2023年8月15日 15:15:15</span>
    </div>
</div>
<div class="center fontSize-26">
    <span>修改计数</span>
    <input type="hidden" name="id" id="id">
    <input type="number" name="realNum" id="realNum">
    <span style="color: red;font-size: 18px;">*也可手动输入</span>
</div>
<div style="display: flex; margin: 2% 20%;">
    <span class="fontSize-26">快捷输入</span>
    <div style="margin-left: 20px;">
        <div class="addsum">
            <span onclick="realNumAdd(10)">加10</span>
            <span onclick="realNumAdd(100)">加100</span>
        </div>
        <div class="addsum">
            <span onclick="realNumAdd(1000)">加1000</span>
            <span onclick="realNumAdd(10000)">加10000</span>
        </div>
        <button onclick="button()">提交</button>
    </div>
</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    $(function () {
        select();
    })

    function select(){
        var lineCode = $("#lineCode").val();
        $.ajax({
            type : 'post',
            url: '/api/screen/enter/select',
            data: {
                'lineCode':lineCode
            },
            success : function(res) {
                if(res.code == '200'){
                    var realNum = res.data.realNum;
                    if (realNum == null || realNum == ''){
                        realNum = 0
                    }
                    $("#count").html(realNum);
                    $("#realNum").val(realNum);
                    $("#id").val(res.data.id);
                    $("#date").html(res.data.nowTime);
                }else{
                    alert('系统错误')
                }
            }
        });
    }

    function realNumAdd(data){
        var realNum = $("#realNum").val();
        if (realNum == null || realNum == ''){
            realNum = 0
        }
        realNum = parseInt(realNum) + parseInt(data);
        $("#realNum").val(realNum);
    }

    function button(){
        $.ajax({
            type : 'post',
            url: '/api/screen/enter/update',
            data: {
                'lineCode':$("#lineCode").val(),
                'realNum': $("#realNum").val(),
                'id': $("#id").val()
            },
            success : function(res) {
                if(res.code == '0'){
                    select();
                    alert('更新成功');
                }else{
                    alert('系统错误');
                }
            }
        });
    }
</script>
<style>
    .top{
        width: 96%;
        margin: 2%;
        height:100px;
        border-radius: 5px;
        border: 1px solid #000000;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: 5px 5px 5px #999
    }
    .top select{
        height: 50px;
        width: 200px;
        font-size: 24px;
    }
    .top select option{
        line-height: 50px;
    }
    .center{
        display:flex;
        align-items:center;
        margin: 0 2%;
        padding-left: 18%;
        border-bottom: 1px solid;
        padding-bottom: 2%;
    }
    .center input{
        height: 50px;
        margin: 0 20px;
        width: 200px;
        font-size: 40px
    }
    .addsum{
        display: flex;
        width: 350px;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .addsum span{
        display: block;
        width: 150px;
        line-height: 40px;
        border: 1px solid;
        border-radius: 5px;
        text-align: center;
    }
    button{
        background: #169BD5;
        color: #ffffff;
        line-height: 50px;
        width: 150px;
        border-radius: 10px;
        font-size: 24px;
        margin-left: 100px;
    }
    .fontSize-26{
        font-size: 26px;
        font-weight: bolder;
    }
    .fontSize-20{
        font-size: 20px;
    }
</style>
</html>